{% extends "CmsBundle::base.html.twig" %}

{% block pluginStyles %}
    <link rel="stylesheet" href="/assets/cms/css/chosen.min.css" />
    <link rel="stylesheet" href="/assets/cms/plugins/kindeditor/themes/default/default.css" />
    <link rel="stylesheet" href="/assets/cms/css/uploadify.css">
{% endblock %}

{% block inlineStyles %}
    <style rel="stylesheet">
        .cover-preview {}
        .cover-preview img {height: 100px; width: 100px;}
        .cover-del {position: absolute;bottom: 0;margin-left: 10px;}

        .printscreen-preview {position: relative}
        .printscreen-preview img {height: 150px; width: 150px;}
        .printscreen-del {position: absolute; bottom: 0; margin-left: 10px;}
    </style>
{% endblock %}

{% block pageContent %}
    <!-- PAGE CONTENT BEGINS -->
    <form class="form-horizontal" role="form" method="post" action="{{ path("yearnfar_cms_h5game_edit", {"page":page, "sort":sort}) }}">
        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" for="form-field-1"> 游戏名称： </label>
            <div class="col-sm-9">
                <input type="hidden" name="pid" value="{{ current.id }}">
                <input type="text" name="name" placeholder="输入标题" class="col-xs-10 col-sm-5" value="{{ current.name }}">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" for="form-field-1">游戏分类：</label>
            <div class="col-sm-9">
                <select class="width-20 chosen-select" name="tid" id="form-field-select-3" data-placeholder="Choose a Country...">
                    {% for item in term %}
                        {% if item.id==current.tid %}
                            <option value="{{ item.id }}" selected="selected">{{ item.name2 }}</option>
                        {%  else %}
                            <option value="{{ item.id }}">{{ item.name2 }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" for="form-field-1"> 游戏地址： </label>
            <div class="col-sm-9">
                <input type="text" name="link" placeholder="游戏地址" class="col-xs-10 col-sm-5" value="{{ current.link }}">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" for="form-field-1">封面图片：</label>
            <div class="col-sm-9">
                <div style="clear: both;padding: 10px 0 0 0;">
                    <span class="btn btn-info">
                        <i class="ace-icon fa fa-upload bigger-125"></i>
                        上传
                    </span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="btn btn-info">
                        <i class="ace-icon fa fa-search bigger-125"></i>
                        从图片库选择
                    </span>
                    <input style="border: 1px #ff0000 solid;" type="file" id="cover-img" />
                </div>
                <!-- 提交文件 -->
                <input type="hidden" name="cover" value="{{ current.cover }}" />
                <div class="hr hr-9 hr-dotted"></div>
                <!-- 预览图片 -->
                <div class="cover-preview" {% if not current.cover %}style="display:none"{% endif %}>
                    <img src="{{ current.cover }}" />
                    <a class="cover-del">
                        <i class="ace-icon fa fa-times bigger-125"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" for="form-field-1">游戏介绍：</label>
            <div class="col-sm-9">
                <textarea class="autosize-intro col-sm-5" name="intro">{{ current.intro }}</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" for="form-field-1">游戏玩法：</label>
            <div class="col-sm-9">
                <textarea class="autosize-intro col-sm-5" name="play">{{ current.play }}</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right">评星分数：</label>

            <div class="col-sm-9">
                <div class="rating inline"></div>
                <div class="hr hr-9 hr-dotted"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" for="form-field-1"> 是否发布： </label>
            <div class="col-sm-9">
                <label>
                    <input type="checkbox" name="publish" class="ace" value="1" {% if current.publish %} checked="checked" {% endif %} />
                    <span class="lbl"></span>
                </label>
                <div class="hr hr-9 hr-dotted"></div>
            </div>

        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label no-padding-right" for="form-field-1">游戏截图：</label>
            <div class="col-sm-9">
                <div style="clear: both;padding: 10px 0 0 0;">
                    <span class="btn btn-info">
                        <i class="ace-icon fa fa-upload bigger-125"></i>
                        上传
                    </span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="btn btn-info">
                        <i class="ace-icon fa fa-search bigger-125"></i>
                        从图片库选择
                    </span>
                    <input style="border: 1px #ff0000 solid;" type="file" id="printscreen-img" />
                </div>
                <!-- 提交文件 -->
                <div id="printscreen">
                {% for imgPath in current.printScreen %}
                    {% if imgPath %}
                        <div class="printscreen-preview">
                        <input type="hidden" name="printscreen[]" value="{{ imgPath }}">
                           <img src="{{ imgPath }}" />
                               <a class="printscreen-del">
                                   <i class="ace-icon fa fa-times bigger-125"></i>
                               </a>
                        </div>
                    {% endif %}
                {% endfor %}
                </div>
                <div class="hr hr-9 hr-dotted"></div>
                <!-- 预览图片 -->


            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right"></label>
            <button class="btn btn-info" type="submit" name="submit" value="1">
                <i class="ace-icon fa fa-ok bigger-110"></i>
                提交
            </button>
            &nbsp; &nbsp; &nbsp;
            <button class="btn" type="reset">
                <i class="ace-icon fa fa-undo bigger-110"></i>
                重置
            </button>
        </div>
    </form>
    <!-- PAGE CONTENT ENDS -->
{% endblock %}

{% block pluginScripts %}
    <script src="/assets/cms/js/chosen.jquery.min.js"></script>
    <script src="/assets/cms/js/jquery.autosize.min.js"></script>
    <script src="/assets/cms/js/jquery.raty.min.js"></script>
    <script src="/assets/cms/plugins/kindeditor/kindeditor-min.js"></script>
    <script src="/assets/cms/plugins/kindeditor/lang/zh_CN.js"></script>
    <script src="/assets/cms/js/jquery.uploadify.min.js"></script>
{% endblock %}

{% block inlineScripts %}
    <script type="text/javascript">


        jQuery(function($) {
            $(".chosen-select").chosen();

            $('textarea[class*=autosize]').autosize({append: "\n"});

            $('.rating').raty({
                'cancel' : true,
                'half': true,
                'starType' : 'i',
                'score' : {% if current.score>0 %} {{ current.score }} {% else %} 0 {% endif %}

                /**,

                 'click': function() {
						setRatingColors.call(this);
					},
                 'mouseover': function() {
						setRatingColors.call(this);
					},
                 'mouseout': function() {
						setRatingColors.call(this);
					}*/
            })//.find('i:not(.star-raty)').addClass('grey');

            setTimeout(function() {
                $('#cover-img').uploadify({
                    'formData': {
                        'timestamp': '{{ timestamp }}',
                        'token': '{{ token }}'
                    },
                    'multi': false,
                    'buttonClass' : "",
                    'buttonText':'',
                    'fileSizeLimit' : '10MB',
                    'width':"88px",
                    'height':'42px',
                    'swf': '/assets/cms/swf/uploadify.swf',
                    'uploader': '{{ path('yearnfar_cms_file_upload', {"name":"cover"}) }}',
                    'onUploadSuccess': function (file, data, respone) {
                        var obj = JSON.parse(data);

                        $('.cover-preview img').attr('src', obj.data['link'][0]);
                        $('input[name="cover"]').val(obj.data['link'][0]);
                        $('.cover-preview').css('display','block');
                    }
                });

                $('#printscreen-img').uploadify({
                    'formData': {
                        'timestamp': '{{ timestamp }}',
                        'token': '{{ token }}'
                    },
                    'buttonClass' : "",
                    'buttonText':'',
                    'fileSizeLimit' : '10MB',
                    'width':"88px",
                    'height':'42px',
                    'swf': '/assets/cms/swf/uploadify.swf',
                    'uploader': '{{ path('yearnfar_cms_file_upload', {"name":"cover"}) }}',
                    'onUploadSuccess': function (file, data, respone) {
                        var obj = JSON.parse(data);

                        $("#printscreen").append(
                            '<div class="printscreen-preview">'                       +
                            '   <input type="hidden" name="printscreen[]" value="'+ obj.data['link'][0] +'">' +
                            '   <img src="'+ obj.data['link'][0] +'" />'              +
                            '       <a class="printscreen-del">'                     +
                            '           <i class="ace-icon fa fa-times bigger-125"></i>'+
                            '       </a>'+
                            '</div>');
                    }
                });
            }, 100);

            $('.cover-del').on('click', function () {
                $('input[name="cover"]').val('');
                $('.cover-preview').css('display','none');
            });
            //
            $('#printscreen').on('click', '.printscreen-del', function () {
                //
                $(this).parent(".printscreen-preview").remove();

                return ;
            });
        });

    </script>
{% endblock %}